<template>
    <div class="tabbar">
        <template v-for="(item,index) in tabbarData">
            <div class="item" @click="tabbarClick(index,item.path)">
                <img v-if="currentIndex === index && index !== 3" :src="getAssetsUrl(item.avtiveImageUrl)" alt="">
                <img v-else :src="getAssetsUrl(item.imageUrl)" alt="">
                <span class="title" :class="{active: currentIndex === index}">{{ item.title }}</span>
            </div>
        </template>
    </div>
</template>

<script setup>
import tabbarData from "@/assets/data/tabbar-data.js"
import getAssetsUrl from "@/utils/getAssetsUrl.js"
import { ref } from "vue";
import { useRouter } from "vue-router"

const currentIndex = ref(0)

const router = useRouter()
function tabbarClick(index,path) {
    currentIndex.value = index
    router.push(path)
}
</script>

<style lang='less' scoped>
.tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    background-color: #fff;
    .item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        img {
            width: 32px;
        }
    }
    .active {
        color: var(--primary-color);
    }
}
</style>